<template>
	<view class="content">
		<u-navbar
			title="登录" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		<scroll-view>
			
		</scroll-view>
		<view class="content-page">
			<view class="container">
				<view class="title">您好，欢迎来到淘京收</view>
				<view class="sub-title">请选择登录方式</view>
				<view class="item-list">
					<view
						class="item"
						v-for="(item, index) in visibleItems"
						:key="index"
						@click="clickItem(item)"
					>
						<view class="flex-a" style="gap: 8px; align-items: center;">
							<view class="icon" :style="{ background: item.bgColor }">
								<u-icon :name="item.icon" :color="item.color" size="28"></u-icon>
							</view>
							<view>
								<view class="title">{{ item.title }}</view>
								<view class="hint">{{ item.hint }}</view>
							</view>
						</view>
						<u-icon name="arrow-right" color="#666" size="14"></u-icon>
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
							class="item-button" v-if="item.showButton && checked.length > 0"></button>
					</view>
				</view>
			</view>
			<view class="select-text flex-a">
				<u-checkbox-group v-model="checked" @change="checkChanged">
					<u-checkbox name="checkbox" shape="circle"
						:active-color="`${mainColor}`"></u-checkbox>
				</u-checkbox-group>
				<view>选中代表您已阅读并同意<text class="link" @click="clickUserAgreement">《用户协议》</text>和<text class="link" @click="clickPrivacyAgreement">《隐私协议》</text></view>
			</view>
		</view>
		<login-popup :show="showLogin" @close="showLogin = false"></login-popup>
	</view>
</template>

<script>
	import { systemInfo } from '@/utils/mixin';
	import { alipayAuthLogin, weixinAuthLogin } from '../../api';
	
	export default {
		mixins: [systemInfo],
		data() {
			return {
				checked: [],
				showLogin: false,
				items: [
					{
						icon: 'weixin-circle-fill',
						color: '#66B660',
						bgColor: '#F0F7F1',
						title: '手机号快捷登录',
						hint: '快速安全，无需输入密码',
						showButton: true,
						show: () => {
							// #ifdef MP-WEIXIN
							return true
							// #endif
							// #ifndef MP-WEIXIN
							return false
							// #endif
						},
						action: (item) => {
							this.ensureAgree(()=> {
								uni.login({
									success: (res) => {
									  if (res.code) {
										console.log("授权成功：", res);
									  } else {
										uni.showToast({ title: '授权失败', icon: 'none' });
									  }
									},
									fail() {
									  uni.showToast({ title: '授权失败', icon: 'none' });
									}
								});
							});
						}
					},
					{
						icon: 'zhifubao-circle-fill',
						color: '#4E58F7',
						bgColor: '#DADFF7',
						title: '手机号快捷登录',
						hint: '快速安全，无需输入密码',
						showButton: true,
						show: () => {
							// #ifdef MP-ALIPAY
							return true
							// #endif
							// #ifndef MP-ALIPAY
							return false
							// #endif
						},
						action: (item) => {
							this.ensureAgree(()=> {
								my.getPhoneNumber({
								  success: async (res) => {
									console.log("授权结果", res.response);
								  },
								  fail: (err) => {
									console.log("授权失败", err)
									uni.showToast({
										icon:'none',
										title: '授权失败'
									})
								  }
								})
							});
						}
					},
					{
						icon: 'phone-fill',
						color: '#3da1e0',
						bgColor: '#e6f3fb',
						title: '手机号验证码登录',
						hint: '输入手机号获取验证码',
						show: () => true,
						action: (item) => {
							this.ensureAgree(()=> {
								this.showLogin = true;
							});
						}
					}
				]
			}
		},
		onLoad() {
			this.getSystemInfo();
			if (uni.getStorageSync('agreement') || false) {
				this.checked = ['checkbox'];
			}
			uni.pageScrollTo({ scrollTop: 0, duration: 0 });
		},
		computed: {
			visibleItems() {
				return this.items.filter(i => i.show())
			}
		},
		methods: {
			checkChanged(checked) {
				this.checked = checked;
			},
			ensureAgree(callback) {
				if (this.checked.length == 0) {
					const that = this;
					uni.showModal({
						content:'请确认您已阅读并同意《用户协议》和《隐私协议》',
						success: ({confirm}) => {
							if (confirm) {
								this.checked = ['checkbox'];
								uni.setStorageSync('agreement', true);
							}
						}
					});
					return false
				}
				uni.setStorageSync('agreement', true);
				if (callback) {
					callback();
				}
				
				return true
			},
			clickUserAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/index?type=user&title=用户协议'
				})
			},
			clickPrivacyAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/index?type=privacy&title=隐私协议'
				})
			},
			clickItem(item) {
				if (item.action) {
					item.action(item);
				}
			},
			async loginAlipay(response) {
				uni.showLoading({
					title:"登录中..."
				})
				const res = await alipayAuthLogin(response);
				uni.hideLoading();
				if (res.code == 2000) {
					uni.reLaunch({
						url:'/pages/index/index'
					});
					this.$store.state.tabIndex = 0;
				} else {
					this.notify(res.msg);
				}
			},
			async loginWeixin(response) {
				uni.showLoading({
					title:"登录中..."
				})
				const res = await weixinAuthLogin(response);
				uni.hideLoading();
				if (res.code == 2000) {
					uni.reLaunch({
						url:'/pages/index/index'
					});
					this.$store.state.tabIndex = 0;
				} else {
					this.notify(res.msg);
				}
			},
			notify(message, duration) {
				uni.showToast({
					icon:'none',
					title:message,
					duration:duration||1500
				})
			},
			async getPhoneNumber(e) {
				// #ifdef MP-ALIPAY
				await this.getAlipayPhoneNumber(e);
				// #endif
				// #ifdef MP-WEIXIN
				await this.getWeixinPhoneNumber(e);
				// #endif
			},
			async getAlipayPhoneNumber(e) {
				if (e.detail.encryptedData) {
					await this.loginAlipay(e.detail.encryptedData);
				} else {
					uni.showToast({
						icon:'none',
						title: '授权失败'
					})
				}
			},
			async getWeixinPhoneNumber(e) {
				if (e.detail.code) {
					await this.loginWeixin(e.detail.code);
				} else {
					uni.showToast({
						icon:'none',
						title: '授权失败'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>	
.content-page {
	display: flex;
	justify-content: center;
	flex-direction: column;
	min-height: 80%;
	padding: 16px 24px;
	
	.container {
		display: flex;
		flex-direction: column;
	
		.title {
			color: $text-color;
			font-size: 18px;
			align-self: center;
			font-weight: 700;
		}
		
		.sub-title {
			color: $hint-color;
			font-size: 14px;
			margin-top: 80px;
		}
	
		.item-list {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin-top: 12px;
			gap: 12px;
	
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16px 16px;
				border-radius: 8px;
				background-color: #fff;
				border: #eee 1px solid;
				position: relative;
	
				.icon {
					width: 58px;
					height: 58px;
					border-radius: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
	
				.title {
					font-size: 16px;
					font-weight: 700;
					color: $text-color;
				}
	
				.hint {
					margin-top: 4px;
					font-size: 14px;
					color: $hint-color;
				}
				
				.item-button {
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					height: 100%;
					opacity: 0;
				}
			}
	
			.item:active {
				background-color: #f5f5f5;
			}
		}
	}
	
	.select-text {
		margin-top: 60px;
	    font-size: 14px;
		align-self: center;
		
		.link {
		    color: #e33233;
		}
	}
}

	
</style>
